<template>
  <div class="wrap-container">
    <div class="item-title">
      <span>换流站</span>
    </div>
    <div class="item-list">
      <span
        v-for="(item, index) in systemData.huanliuzhanList"
        :key="index"
        class="select-item"
        @click="handle(1, index, item.id)"
        :class="{ active: index == currentId1 }"
        >{{ item.site }}</span
      >
    </div>
    <div class="item-title">
      <span
        v-for="(item, index) in systemData.huanliufaList"
        :key="index"
        @click="handle(2, index, item.id)"
        :class="['button', { active: index == currentId2 }]"
        >{{ item.valve }}</span
      >
    </div>
    <div class="item-list">
      <span
        v-for="(item, index) in systemData.qiaobiList"
        :key="index"
        @click="handle(3, index, item.id)"
        class="select-item"
        :class="{ active: index == currentId3 }"
        >{{ item.armName }}</span
      >
    </div>
    <div class="item-title flex-between">
      <span v-if="systemData.sonModuleList.length">子模块</span>
      <!--      <el-form class="form-search" inline>-->
      <!--        <el-form-item label="">-->
      <!--          <el-input-->
      <!--            size="mini"-->
      <!--            v-model="searchId"-->
      <!--            placeholder="请输入子模块号"-->
      <!--          ></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
    </div>
    <div class="item-list last">
      <div class="flex-wrapper">
        <span
          v-for="(item, index) in systemData.sonModuleList"
          :key="index"
          @click="handle(4, index, item.id)"
          class="select-item"
          :class="index === activeIndex ? 'active' : ''"
          >{{ item.modelName }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import {
  getXjSiteList,
  getXjValueList,
  getXjArmList,
  getXjModelList,
} from "@/api/earlyWarning";
export default {
  name: "ItemWrap",

  data() {
    return {
      systemData: {
        huanliuzhanList: [],
        huanliufaList: [],
        qiaobiList: [],
        sonModuleList: [],
      },
      currentId1: 0,
      currentId2: 0,
      currentId3: 0,
      currentId4: 0,
      moduleList: [],
      searchId: "",
      activeIndex: 0,
    };
  },
  created() {
    this.getXjSiteList();
  },
  methods: {
    handle(index, val, id) {
      this["currentId" + index] = val;
      switch (index) {
        case 1:
          this.getXjValueListData(id);
          break;
        case 2:
          this.getArmData(id);
          break;
        case 3:
          this.getModelData(id);
          break;
        case 4:
          this.$nextTick(() => {
            let arr = [];
            this.systemData.sonModuleList.forEach((item, idx) => {
              if (item.id === id) {
                // item.isSelected = !item.isSelected;
                this.activeIndex = idx;
                arr.push(item.modelName);
              }
              // if (item.isSelected) {
              //   arr.push(item.modelName);
              // }
            });
            this.$bus.$emit("sonModule", JSON.stringify(arr));
          });
          break;
      }
    },

    // 换流站列表
    async getXjSiteList() {
      let result = await getXjSiteList();
      if (result.code == 20000) {
        this.systemData.huanliuzhanList = result.data;
        try {
          this.systemData.huanliufaList = [];
          this.systemData.qiaobiList = [];
          this.systemData.sonModuleList = [];
          if (Array.isArray(result.data) && result.data.length) {
            this.$store.commit("setStationName", result.data[0].site);
            // 查询换流阀数据
            await this.getXjValueListData(result.data[0].id);
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
    // 换流阀
    async getXjValueListData(id) {
      let result = await getXjValueList({ siteId: id });
      if (result.code == 20000) {
        this.systemData.huanliufaList = result.data;
        try {
          this.systemData.qiaobiList = [];
          this.systemData.sonModuleList = [];
          if (Array.isArray(result.data) && result.data.length) {
            this.$store.commit("setSontrolName", result.data[0].valve);
            // 查询换流阀数据
            await this.getArmData(result.data[0].id);
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
    // 桥臂
    async getArmData(id) {
      let result = await getXjArmList({ valveId: id });
      if (result.code == 20000) {
        this.systemData.qiaobiList = result.data;
        try {
          this.systemData.sonModuleList = [];
          if (Array.isArray(result.data) && result.data.length) {
            this.$store.commit("setBridgeName", result.data[0].armName);
            await this.getModelData(result.data[0].id);
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
    // 子模块
    async getModelData(id) {
      let result = await getXjModelList({
        armId: id,
        currentPage: 1,
        pageSize: -1,
      });
      if (result.code == 20000) {
        try {
          if (
            Array.isArray(result.data.records) &&
            result.data.records.length
          ) {
            let arr = [result.data.records[0].modelName];

            this.$bus.$emit("sonModuleTwo", JSON.stringify(arr));
            // 子模块列表
            this.systemData.sonModuleList = result.data.records.map((item) => {
              return {
                ...item,
                isSelected: false,
              };
            });
            this.systemData.sonModuleList[0].isSelected = true;
          }
        } catch (err) {
          throw new Error(err);
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.wrap-container {
  width: 360px;
  height: 100%;
  // border: 1px solid #006686;
  background-color: #202f3e;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .item-title {
    font-size: 16px;
    color: #fff;
    margin: 20px 0 10px 5px;
    display: flex;
    align-items: center;
    &.flex-between {
      justify-content: space-between;
    }
    span {
      margin-right: 10px;
      &.button {
        cursor: pointer;
        color: #aaa;
        &:hover {
          color: #006686;
        }
      }
      &.active {
        color: #fff;
      }
    }
    .el-input {
      width: 160px;
    }
  }
  .item-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // justify-content: flex-start;
    align-items: flex-start;
    &.last {
      flex: 1;
      overflow-y: auto;
      .flex-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        // align-content: flex-start;
      }
    }
  }
}
.select-item {
  cursor: pointer;
  &:hover {
    color: #006686;
  }
  height: 32px;
  margin: 4px 5px;
  padding: 0 4px;
  border: 2px solid #006686;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  &.active {
    background-color: #006686;
    color: #fff;
  }
  //&.active:hover {
  //  color: #000;
  //}
}
</style>
